<template>
  <div>
    
    <!-- <p>刷新次数: {{ count }}</p> -->
     <header>
         <nav>
            <img src="../../assets/heishang.png" alt="" @click="fan">
            <p>购物车</p>
            <a href="#" @click="guan">{{ guanli }}</a>
         </nav>
     </header>
     <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
   <article>
     <section>
            <img src="../../assets/shop_car.png" alt="" v-if="have==1">
            <span v-if="have==1">您的购物车没有商品，快去添加商品吧</span>
            <van-checkbox-group v-model="result" ref="checkboxGroup"  class="car_commodity" v-for="(item,index) in xuan" :key="index">
                  <div class="Commodityhead"  style="background-color: #ffffff;">
                    <div class="car_commodity_2">
                        <div class="box">
                            <label class="deal" for="check4">
                                <!-- <input type="checkbox" name="userName" id="check4" value="姓名"><span><span></span></span> -->
                                <van-checkbox  :name=item style="margin-top:8px"></van-checkbox>
                            </label>
                        </div>
                        <img src="https://gw.alicdn.com/imgextra/i1/6000000007133/O1CN01E1ak9622YxrxiowDZ_!!6000000007133-0-shopmanager.jpg_110x10000q50.jpg_.webp"
                            alt="">
                        <div class="store">
                            <div class="storefront"> &nbsp; {{ item.shopname }}</div>
                            <img src="../../assets/nextstep.png" alt="" style="margin-top: -2px;">
                       </div>
                    </div>
                    <div class="coupon">
                        领卷
                    </div>
                </div>
                <!-- 购物商品 -->
                <div class="merchandiseNews">
                    <!-- 左边商品选择和商品图片 -->
                    <div class="merchandiseNews_left" style="height: 130px;">
                        <div class="box">
                            <label class="deal" for="check5">
                                <van-checkbox :name=item></van-checkbox>
                            </label>
                        </div>
                        <img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i1/2211568769953/O1CN010ydbUR2NOWjdte8nj_!!0-item_pic.jpg_580x580Q90.jpg_.webp"
                            alt="">
                    </div>

                    <div class="right_sp" style="height: 180px;">
                        <div style="margin-left: 30px;">
                            <div class="explain">{{ item.goodsname }}</div>
                            <button class="explain1">{{ item.colour }}{{ item.size }}</button>
                        </div>
                        <div class="explain2">
                            <div class="explain2_2" style="width: 40px;">
                                <p>￥</p>
                                <p>{{ item.goodsprice }}</p>
                            </div>
                            <div class="jj_number">
                                <button class="jianjian" @click="jianjian(index)">-</button>
                                <div class="explain3" style="border: 0;">{{ item.goodsnum }}</div>
                                <button class="jiajia" @click="jiajia(index)">+</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="explain4">预估到手价 <p>￥</p>
                    <p>{{ item.goodsprice }}</p>
                </div>

</van-checkbox-group>

        </section>

        <div class="cxnh">猜你喜欢</div>
        <Shop/>
      </article> 
<!-- 管理前 -->
      <footer style="width: 100%;height:40px;position:fixed;bottom:0;display: flex;background-color: #ffffff; justify-content: space-between;align-items: center;" v-if="num==1"> 
        <van-button type="primary" @click="checkAll" style="background-color: red;border-radius: 15px; height: 30px;border: 0;">全选</van-button>
        <div style="width: 150px;height: 30px;display: flex;align-items: center;justify-content: space-evenly;">
            <div style="padding: 3px 10px; background-color: red; border-radius: 10px;color: #ffffff;" @click="suan(xuan[0].gid,xuan[0].cid,xuan[0].uid,)">结算</div>
        </div>
    </footer>
    <!-- 管理后 -->
      <footer style="width: 100%;height:40px;position:fixed;bottom:0;display: flex;background-color: #ffffff; justify-content: space-between;align-items: center;" v-if="num==2"> 
        <van-button type="primary" @click="checkAll" style="background-color: red;border-radius: 15px; height: 30px;">全选</van-button>
        <div style="width: 200px;height: 30px;display: flex;align-items: center;justify-content: space-evenly;" >
            <div style="width: 90px;text-align: center; font-size: 14px;line-height: 25px; height: 25px;border-radius: 10px; border: 1px solid rgb(210, 210, 210);">移入心愿单</div>
            <div style="width: 90px;text-align: center; font-size: 14px;line-height: 25px; height: 25px;border-radius: 10px; border: 1px solid rgb(210, 210, 210);" @click="delete1">删除</div>
        </div>
    </footer>

    
  </van-pull-refresh>
   </div> 
</template>


<script>
import { Toast } from 'vant';
import { Shopping_trolley } from '../../api/Shopping'
import { Shopping_car_num } from '../../api/Shopping'
import Shop from '../../components/Shopping_page_shop.vue'
export default {
    components: {
        Shop
    },
    data() {
        return {
        goodsnum:"",
        count: 0,
        isLoading: false,
        num: 1,
        guanli: "管理",
        id: "",
        xuan: [],
        result: [],
            have: "",
    };
  },
    methods: {

        // 商品数量减减
        jianjian(i) {
            this.xuan[i].goodsnum > 1 ? this.xuan[i].goodsnum-- : this.xuan[i].goodsnum == 1,
            // console.log(this.xuan[i].goodsnum);
            Shopping_car_num({
            cid: this.xuan[i].cid,
            goodsnum: this.xuan[i].goodsnum,
        }).then((res) => {
            // console.log(res);
        }).catch((rest) => {
            // console.log(rest);
        })
        },
        //商品数量加加
        jiajia(i) {
            this.xuan[i].goodsnum++
            Shopping_car_num({
            cid: this.xuan[i].cid,
            goodsnum: this.xuan[i].goodsnum,
        }).then((res) => {
            // console.log(res);
        }).catch((rest) => {
            // console.log(rest);
        })
        },
        checkAll() {
      this.$refs.checkboxGroup.toggleAll(true);
    },
    toggleAll() {
      this.$refs.checkboxGroup.toggleAll();
    },
    onRefresh() {
      setTimeout(() => {
        Toast('刷新成功');
        this.isLoading = false;
        this.count++;
      }, 1000);
      },
      fan() {
        // console.log(123);
          this.$router.push('/Shopping_page');
      },
      guan() {
          if (this.num == 1) {
            this.guanli="完成"
            this.num=2
          } else if(this.num==2){
            this.guanli="管理"
            this.num=1
        }
      },
        Shopping_car() {
            let data = JSON.parse(localStorage.getItem("userid"));
            this.id =  data + "";
            Shopping_trolley({
                uid: this.id
            }).then((res) => {
                // console.log(res);
                // console.log(res)
                // console.log(this.id);
                if (res.code == 200) {
                    this.have = 2;
                   this.xuan = res.result;
                    this.goodsnum = res.result.goodsnum;
                   console.log(this.xuan);
                // console.log(res);  
                } else {
                    this.have = 1;
            }
          }).catch((rest) => {
            // console.log(rest);
            this.have = 1;
          })
        },
        //结算
        suan(a,b,c) {
            this.$router.push({
                name:'orderpayment',
                params: {
                    b: b,
                    a: a,
                    c: c
                }
            })

        },
    delete1() {
        },
        
    },
    mounted() {
    this.Shopping_car()
    },
}
</script>

<style scoped>
* {
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
}

html {
    background-color: rgb(244, 244, 244);
}

nav {
    width: 100%;
    height: 40px;
    background-color: rgb(255, 255, 255);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

nav img {
    width: 15px;
    height: 15px;
    margin-left: 10px;
}

nav p {
    font-size: 15px;
}

nav a {
    font-size: 13px;
    color: #000;
    margin-right: 10px;
}

section {
    width: 300px;
    margin: 0 auto;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

section img {
    width: 120px;
    height: 120px;
}

section span {
    font-size: 15px;
    color: rgb(199, 199, 199);
}

.interested {
    width: 100%;
    margin-bottom: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.tui {
    width: 180px;
    height: 240px;
    background-color: #ffffff;
    margin-top: 10px;
    border-radius: 20px;
}

input {
    width: 15px;
    height: 15px;
    border-radius:50% ;
}


/* footer div:nth-child(1) {
    width: 100px;
    height: 30px;
    display: flex;
    justify-content: space-evenly;
}

footer div {
    width: 160px;
    height: 30px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

footer div:nth-child(2) div {
    width: 80px;
    height: 30px;
    border-radius: 20px;
    background-color: rgb(252, 55, 72);
} */

.money {
    color: rgb(252, 55, 72);
}

.tui img {
    width: 180px;
    height: 150px;
}

.tui span {
    font-size: 9px;
    color: rgb(57, 57, 57);
    display: block;
    width: 160px;
}

.tui p:nth-child(1) {
    color: rgb(252, 55, 72);
    font-size: 12px;
}

.tui p:nth-child(2) {
    color: rgb(252, 55, 72);
    font-weight: 600;
    font-size: 13px;
}

.silver_dollar {
    margin-bottom: 7px;
    width: 170px;
    height: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.silver_dollar div {
    font-size: 12px;
    color: rgb(181, 181, 181);
}

.tui {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}


/* 购物车 */
.car_commodity {
    width: 370px;
    /* height: 180px; */
    padding: 20px 10px;
    border-radius: 15px 15px 0 0;
    background-color: #ffffff;
}

/* .car_commodity div{ */
/* width: 358px;
    height: 30px; */
/* background-color: rgb(115, 50, 255); */
/* display: flex;
    justify-content: space-between;
    align-items: center; */
/* } */
/* .car_commodity div div{
    width: 178px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
} */
/* .car_commodity div img{
    width: 20px;
    height: 20px;
}
.car_commodity div input{
    width: 18px;
    height: 18px;
}
.car_commodity_2{
    margin-right: 10px ;
    font-size: 14px;
    width: 40px;
    height: 23px;
    border-radius: 14px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lingjuan{
    border: 1px solid;
}
.left_sp{
    width: 130px;
    height: 110px;
    display: flex;
}

.jiajia, .jianjian{
    width: 16px;
    height: 16px;
    border-radius: 5px;
    border: 0; 
    background-color: rgb(245, 245, 245);
}
/* .jj_number{
    width: 150px;
} */

.right_sp{
    width: 220px;
    height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.jj_number{
    display: flex;
    align-items: center;
}
.jiajia,.jianjian{
    width: 30px;
    height: 30px;
    font-size:30px;
    border-radius: 50%;
    /* font-weight: 600; */
    background-color: rgb(245,245,245);
    border: 0;
}
.explain1{
    overflow: hidden;
    width: 180px;
    font-size: 15px;
    display: flex;
    align-items: center;

}
.explain3{
    border: 0;
}
.zhong{
    width: 358px;
    height: 116px;
    display: flex;
    justify-content: space-between;
}
.left_sp img{
    width: 100px;
    height: 100px;
    border-radius: 15px;
}
.explain{
    width: 213px;
    height: 20px;
    /* white-space:nowrap; */
    /* overflow: hidden; */
    white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
}
.explain1{
    width: 200px;
    height: 30px;
    white-space:nowrap;
    background-color: rgb(244, 244, 244);
    line-height: 30px;
    border-radius: 7px;
}
.explain2{
    width: 200px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.explain2 p:nth-child(2){
    font-weight: 600;
}
.explain3{
    border: 1px solid;
    width: 35px;
    height: 20px;
    border-radius: 15px;
    display: block;
    text-align: center;
    line-height: 20px;
    text-align: center;
    display: flex;
}
.explain4{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: -27px;
}
.cxnh{
    margin:15px 0 10px 15px ;
    font-size: 20px;
}
    /* margin-right: 9px; */
/* }
.explain4{
    width: 350px;
    height: 30px;
    margin-top: -15px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.explain4 p:nth-child(1){
    font-size: 15px;
    color:#e60d0d ;
}
.explain4 p:nth-child(2){
    font-size: 18px;
    font-weight: 600;
    color:#e60d0d ;
} */

/* 支付弹出 */
.pop1{
    width: 100vw;
    height: 100vh;
    background-color: rgb(0, 0, 0, 0.3);
    position: absolute;
    top: 0;
    display: none;
    z-index: 99999999;
}

.popup-pp {
    width: 40px;
    height: 40px;
    float: right;
    margin-top: -10px;
}

.popup {
    width: 100%;
    height: 600px;
    background-color: rgb(247, 247, 247);
    border-radius: 15px;
    padding-top: 20px;
    box-sizing: border-box;
    position: relative;
    position: fixed;
    bottom: 0;
    padding-left: 15px;
    /* display: none; */
}

.im img {
    width: 100px;
    height: 100px;
    border-radius: 10px;
}

.im {
    /* padding-left: 15px; */
    position: relative;
}

.q {
    font-size: 25px;
}

.newpric {
    color: rgb(184, 29, 29);
    font-weight: 800;
    font-size: 12px;
}

.np {
    position: absolute;
    top: 0;
    margin-left: 10px;
}

.hint {
    margin-top: 15px;
    display: flex;
    justify-content: center;
}

.hint p {
    display: flex;
    font-size: 10px;
    margin-right: 30px;
    letter-spacing: 2px;
}

.hint p img {
    padding-right: 8px;
}

.design {
    position: relative;
    margin-top: 25px;
}

.design h6 {
    font-size: 18px;
    font-weight: 500;
}

.design_1 {
    display: flex;
    flex-wrap: wrap;
}

.design_1 div {
    margin-top: 5px;
    /* width: 150px;
    height: 30px; */
    padding-top: 5px;
    box-sizing: border-box;
    border-radius: 50px 50px 0px 0;
    text-align: center;
    border-radius: 30px 30px 30px 30px;
    background-color: #f0f0f0;
}

.design_1 div {
    background-color: #f0f0f0;
    color: #bcbcbc;
    margin-right: 20PX;

    /* z-index: 999; */
}


/* 点击然后添加class名称 */
/* .clik{
    color: rgb(184, 29, 29);
    background-color: rgba(240, 201, 201, 0.338);
} */


.sk {
    width: 50px;
    height: 30px;
    background-color: #bcbcbccc;
    border-radius: 30px 30px 0 30px;
    text-align: center;
    color: white;
    position: absolute;
    top: 28px;
    left: 100px;

}


i {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    display: inline-block;
    background-color: rgb(239, 238, 238);
    /* border: 1px solid black; */
    border-radius: 50px;
}

.num {
    margin: 0px 5px;


}

.price {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
}

.addsub {
    margin-right: 15px;
}

.ply {
    position: absolute;
    bottom: 10px;
}

.ply button {
    width: 360px;
    height: 40px;
    background-color: red;
    color: white;
    border: 0px;
    border-radius: 30px;
}

.ply button a {
    color: white;
}

.clik {
    padding: 15px;
    /* padding: 5px 10px; */
    color: rgb(184, 29, 29) !important;
    background-color: rgba(240, 201, 201, 0.338) !important;
}

.clik1 {
    padding: 15px;
    /* padding: 5px 10px; */
    color: rgb(184, 29, 29) !important;
    background-color: rgba(240, 201, 201, 0.338) !important;
}

.h66 {
    margin-top: 15px;
}

.ax {
    padding: 15px;
}

.Commodityhead {
    /* width: 300px; */
    /* overflow: hidden; */
    background-color: wheat;
    display: flex;
    justify-content: space-between;
    line-height: 30px;
}

.car_commodity_2 img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-left:10px;
    margin-top: 3px;
}
.car_commodity_2{
    display: flex;
    justify-content: space-between;
}
.car_commodity_2{
    font-size: 16px;
    line-height: 30px;
}
.store{
    display: flex;
    align-items: center;
}
.store img{
    width: 20px;
    height: 20px;
}
.coupon{
    padding: 0 10px;
    border: 1px solid rgb(105, 105, 105);
    border-radius: 20px;
    display: inline-block;
    font-size: 14px;
}

/* 复选框加对钩 */
.box input[type="checkbox"] {
    display: none;
}

.box input[type="checkbox"]+span {
    box-sizing: border-box;
    display: inline-block;
    width: 30px;
    height: 30px;
    padding: 0px 10px;
    border: 2px solid #ccc;
    vertical-align: sub;
    margin-right: 5px;
    border-radius: 50%;
}

.box input[type="checkbox"]+span>span {
    display: inline-block;
    width:8px;
    height: 18px;
    /* float: left; */
    border-right: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    transform: rotate(45deg);
    opacity: 0;
}

.box input[type="checkbox"]:checked+span {
    border-color: red;
    background: red;
}

.box input[type="checkbox"]:checked+span>span {
    opacity: 1
}

.box{
    width: 30px;
    display: inline-block;
    margin: 0;
}

/* 商品中部信息 */
.merchandiseNews_left{
    width:200px;
    /* background-color: palevioletred; */
    display: flex;
    align-items: center;
}
.merchandiseNews_left img{
    border-radius: 10px;
    margin-left: 10px;
}
.merchandiseNews{
    box-sizing: border-box;
    display:flex;
    /* background-color: wheat; */
    padding-top: 10px;
}
.right_sp{
    height: 200px;
    padding: 10px;
    box-sizing: border-box;
    /* display: inline-block; */
    /* background-color: rgb(138, 194, 138); */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.explain{
    font-size: 14px;
    white-space:nowrap;
    overflow: hidden;
}
.explain1{
    margin-top: 10px;
    /* margin: 10px; */
    width: 100%;
    border-radius: 5px;
    padding: 3px;
    border: 0;
    background-color: #ededed;
    color: #909090;
    overflow: hidden;
}
.explain2_2{
    display: flex;
}
.explain2{
    margin-top: 20px;
}
.deal span{
    width: 20px;
    height: 20px;
}
</style>